import React,{Suspense} from 'react'
import router from './router'
import { BrowserRouter,Route,Routes,Navigate } from 'react-router-dom'
function App() {

  const renderRouter = (arr) =>{
    return arr && arr.map((item,index)=>{
      return <Route
      key={index}
      path={item.path}
      element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}
      >
        {
          item.children && renderRouter(item.children)
        }
      </Route>
    })
  }

  return (
    <Suspense fallback={<div>loading....</div>}>
      <BrowserRouter>
        <Routes>
          {
            renderRouter(router)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
    
  )
}

export default App
